<template>
	<wsPage title="服务费设置">
		<div slot="page_operate">
			<Button  @click="refresh"><Icon type="refresh"></Icon><span>刷新</span></Button>
		</div>
		<wsSmPanel>
			<div slot="list_data">
				<div class="title-row">
					<span style="">当前路径:</span>
					<span v-for="(item, index) in history.parents">
						<span v-if="index > 0" style="padding: 0 3px;">></span><a @click="listParent(item, index)" v-text="item.name"></a>
					</span>
				</div>
				<ws-table :data="table.data" style="width: 100%">
					<ws-table-column align="center" prop="name" label="名称">
						<template slot-scope="scope">
							<a @click="listChilds(scope.row)" v-if="scope.row.leafNodeType == 1">{{scope.row.name}}</a>
							<span v-if="scope.row.leafNodeType == 0" v-text="scope.row.name"></span>
						</template>
					</ws-table-column>
					<ws-table-column align="center" prop="goodsNum" label="商品数量" width="80"></ws-table-column>
					<ws-table-column align="center" prop="childsNum" label="子类目" width="80"></ws-table-column>
					<ws-table-column align="center" width="160" label="操作">
						<template slot-scope="scope">
							<Button @click="showEditModal(scope.row)" v-show="scope.row.leafNodeType == 0"  type="text" size="small">设置服务费比例</Button>
      				</template>
					</ws-table-column>
				</ws-table>
			</div>
		</wsSmPanel>

        <!--新增属性弹框-->
		<wsModal v-model="modal.show" ok-text="保存" :title="modal.title"  @on-ok="modalSave"  @on-cancel="modalCancel">
		    <Form ref="modalForm" :model="modal.form" :rules="modal.validate" :label-width="150">
		        <FormItem label="分类名称" prop="categoryName">
		            <span v-text="modal.form.categoryName"></span>
		        </FormItem>
                <FormItem label="服务费比例" prop="serviceRate" required>
		            <Input v-model="modal.form.serviceRate" autofocus></Input>
		        </FormItem>
                <FormItem label="支付宝服务费比例" prop="alipayServiceRate" required>
		            <Input v-model="modal.form.alipayServiceRate" autofocus></Input>
		        </FormItem>
                <FormItem label="微信服务费比例" prop="wxPayServiceRate">
		            <Input v-model="modal.form.wxPayServiceRate" autofocus></Input>
		        </FormItem>
                <FormItem label="最后修改时间" prop="categoryName">
		            <span v-text="modal.form.updateDate"></span>
		        </FormItem>
                <FormItem label="创建人" prop="categoryName">
		            <span v-text="modal.form.createBy"></span>
		        </FormItem>
                <FormItem label="修改人" prop="categoryName">
		            <span v-text="modal.form.updateBy"></span>
		        </FormItem>
		    </Form>			
		</wsModal>	
	</wsPage>
</template>

<script>
	import Util from '../../../common/util.js';
	import Common from '../../../common/common.js';
	export default {
		data() {
			return {
				params: {
					parentId: -1
				},
				table: {
					data: [],
                },
                history: {
					pages: [],
					parents: [{
						name: '首页',
						id: -1
					}]
				},
                obj: {
                    id: 0,
                    serviceRate: '',
                    alipayServiceRate:'',
                    wxPayServiceRate : '',
                    categoryId : ''
                },
                form: {
                    data: {
                        categoryName:''
                    }
                },
                modal: {
					show: false,
					title: '',
					form: {
                        id: 0,
                        categoryName:'',
                        serviceRate: '',
                        alipayServiceRate:'',
                        wxPayServiceRate : '',
                        categoryId : '',
                        updateDate : '',
                        createBy : '',
                        updateBy : ''
					},
					fields: {
						leafNodeType: true
					},
					validate: {
	                    serviceRate: [
	                        { required: true, message: '服务费比例不能为空' }
                        ],
                        alipayServiceRate: [
	                        { required: true, message: '支付宝服务费比例不能为空' }
                        ],
                        wxPayServiceRate: [
	                        { required: true, message: '微信服务费比例不能为空' }
	                    ]
					}
				},
			}
		},
		computed: {
	
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.query();
            },
            /**
			 * 刷新
			 */
			refresh() {
                this.table.data = [];
				this.init();
			},
			/**
			 * 表单查询
			 */
			query() {
				let parentId = this.params.parentId;
				const _this = this;
				this.axios.get('/ws/ops/v2/categorys/'+ parentId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
                        _this.buildPageData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});	
            },
            buildPageData(data_) {
                this.table.data = data_;
            },
            /**
			 * 获取子列表
			 */
			listChilds(row_) {
				this.history.parents.push({
					name: row_.name,
					id: row_.id
				});
				this.params.parentId = row_.id;
				this.query();
			},
			listParent(item_, index_) {
				//如果已经是最后了，就不用显示
				let parentLength = this.history.parents.length;
				if(index_ == parentLength - 1) {
					return;
				}
				//从数组中截掉
				this.params.parentId = item_.id;
				this.history.parents.splice(index_ + 1, parentLength - index_ - 1);
				this.query();
            },
            			/**
			 * 模态框取消
			 */
			modalCancel() {
				this.resetModalForm();
				this.modal.show = false;
			},
            /**
			 * 打开新增模态框
			 */
			showEditModal(rowData){
				this.modal.title='设置分类服务费比例';
				this.initModalData(rowData);
			},
			/**
			 * 初始化模态框数据
			 */
			initModalData(rowData) {
                let _this = this;
                let categoryId = rowData.id;
				this.axios.get('/ws/ops/platform/service/' + categoryId).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.buildModalData(res.data);
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			/**
			 * 构建模态框的图片
			 */
			buildModalData(data) {
				this.modal.form.id = data.id;
				this.modal.form.categoryName = data.categoryName;
				this.modal.form.serviceRate = data.serviceRate;
				this.modal.form.alipayServiceRate = data.alipayServiceRate;
				this.modal.form.wxPayServiceRate = data.wxPayServiceRate;
                this.modal.form.categoryId = data.categoryId;
                this.modal.form.updateDate = data.updateDate;
                this.modal.form.createBy = data.createBy;
                this.modal.form.updateBy = data.updateBy;
				this.modal.show = true;
            },
            resetModalForm() {
				this.$refs['modalForm'].resetFields();
				this.modal.form.id = '';
				this.modal.form.categoryName = '';
				this.modal.form.serviceRate = '';
				this.modal.form.alipayServiceRate = '';
				this.modal.form.wxPayServiceRate = '';
				this.modal.form.categoryId = '';
			},
            /**
             * 修改单个分类服务费
             */
            saveExchangeRate() {
                const _this = this;
                _this.obj.id = this.modal.form.id;
                _this.obj.serviceRate = this.modal.form.serviceRate;
                _this.obj.alipayServiceRate = this.modal.form.alipayServiceRate;
                _this.obj.wxPayServiceRate = this.modal.form.wxPayServiceRate;
                _this.obj.categoryId = this.modal.form.categoryId;
                this.axios.post('/ws/ops/platform/service/rate', _this.obj).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
						_this.$Message.warning(resMeta.message);
					} else {
						_this.$Message.warning(resMeta.message);
                    }
                    this.query();
                    this.modalCancel();
				});
                
            },
            			/**
			 * 模态框保存
			 */
			modalSave() {
				this.$refs['modalForm'].validate((valid) => {
					if (valid) {
                        this.saveExchangeRate();
                    } 
               });
			},

            /**
             * 批量修改汇率
             */
            saveExchangeRateList() {
                const _this = this;
                console.log(_this.table.data);
                
                this.axios.put('/ws/ops/batch/platform/service/rate', _this.table.data).then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if (0 == resMeta.code) {
                        _this.$Message.warning(resMeta.message);
                        this.init();
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
                
            },
		}
	}
</script>

<style scoped>
	.ws-form-select {
		width: 162px;
	}
	.title-row {
		padding: 10px;
	}
	.ws-icon {
		font-size: 30px;
	}
</style>
<style>
	img.emoji {
	    width: 2em !important;
	    height: 2em !important;
	}
    input::-webkit-input-placeholder{
        margin-left:20px !important;    
    }
    input:focus::-webkit-input-placeholder {
    color: red;
}
</style>